<template>
  <div>
      <div class="home">
        <div class="container">
            <div class="box_header">     
                   
                <div class="navtop">
                    <div class="logo">
                        <img class="auto-img" src="../assets/img/icon_news_logo.png" alt="">
                    </div>
                    <div class="search"  @click="$router.push('/search')">
                        <span>
                            <img class="auto-img" src="../assets/img/icon_news_search.png" alt="">
                        </span>
                        温暖的BaoBao
                    </div>
                    <div class="study" @click="$router.push('/centre')">
                        <img class="auto-img" src="../assets/img/icon_learn.png" alt="">
                    </div>
                </div>
                <div class="nav">
                    <ul>
                        <li @click="tab(i)" v-for="(item,i) in tabTitle" :key="i" 
                        :class="[{'con':i==0},nowindex==i?'com':'']"
                        >
                            {{item}}
                            <div ></div>
                        </li>
                       
                        
                    </ul>
                    
                    <div class="plus" @click="add">
                        <img src="../assets/img/icon_article_add_topic.png" alt="" class="auto-img">
                    </div>
                </div> 
                
            </div>
            <div class="homemain" v-show="this.nowindex==0">
             <div class="bannertitle">
                <div class="titlebox">
                    <div></div>
                    <div class="headtitle">
                        青创头条
                    </div>
                    </div>
                    <router-link tag="div" to="/composite" class="subtitle">
                        查看更多
                    </router-link>
            </div>
            
            <div class="box_body">
                <!-- 轮播图 -->
                <div class="banner" >
                  <div class="swiper mySwiper">
                    <div class="swiper-wrapper ">
                      <div class="swiper-slide swiper-banner" v-for="(item) in Bannerimg" :key="item.id">
                          <router-link :to="'/details?id='+item.id" tag="ul">
                              <li>     
                                  <img :src="item.img" alt="" class="auto-img">
                                  <p>{{item.title}}</p> 
                                  <span>{{item.name}}</span>
                              </li>
                            
                          </router-link>
                      </div>
                    </div>
                    
                  </div>
                </div>
            </div>
            <div class="line"></div>
            <!-- 列表页渲染 -->
            <div class="box_foot_lists" v-if="Lists">
                <ul>
                  
                    <div v-for="(item) in Lists" :key="item.id">
                      <router-link :to="'/details?id='+item.id" tag="li">
                        <div class="titlebox">
                            <div class="title">{{item.title}}</div>
                            <div class="subtitle">
                                <!-- 存在video数据或者有hot数据的加上con类名 -->
                                <div :class="[{'con':item.video || item.hot}]">{{item.video}}{{item.hot}}</div>
                                <div>{{item.name}} {{item.time}}小时前</div>
                            </div>
                        </div>
                        <div class="imgbox">
                            <img :src="item.img" alt="" class="auto-img">
                        </div>
                        </router-link>
                    </div>
                  
                    
                </ul>
            </div>

            <!-- 空盒子 -->
            <div class="nullbox"></div> 
            </div>
            <div class="homemain" v-show="this.nowindex==1">
              <!-- 列表页渲染 -->
            <div class="box_foot_lists" v-if="Lists">
                <ul>
                  
                    <div v-for="(item) in Lists" :key="item.id">
                      <router-link :to="'/details?id='+item.id" tag="li">
                        <div class="titlebox">
                            <div class="title">{{item.title}}</div>
                            <div class="subtitle">
                                <!-- 存在video数据或者有hot数据的加上con类名 -->
                                <div :class="[{'con':item.video || item.hot}]">{{item.video}}{{item.hot}}</div>
                                <div>{{item.name}} {{item.time}}小时前</div>
                            </div>
                        </div>
                        <div class="imgbox">
                            <img :src="item.img" alt="" class="auto-img">
                        </div>
                        </router-link>
                    </div>
                  
                    
                </ul>
            </div>
            
             
            <div class="line"></div>
            
            
            

            <!-- 空盒子 -->
            <div class="nullbox"></div> 
            </div>
            <div class="homemain" v-show="this.nowindex==2">
              <!-- 列表页渲染 -->
            <div class="box_foot_lists" v-if="Lists">
                <ul>
                  
                    <div v-for="(item) in Lists2" :key="item.id">
                      <router-link :to="'/details2?id='+item.id" tag="li">
                        <div class="titlebox">
                            <div class="title">{{item.title}}</div>
                            <div class="subtitle">
                                <!-- 存在video数据或者有hot数据的加上con类名 -->
                                <div :class="[{'con':item.video || item.hot}]">{{item.video}}{{item.hot}}</div>
                                <div>{{item.name}} {{item.time}}小时前</div>
                            </div>
                        </div>
                        <div class="imgbox">
                            <img :src="item.img" alt="" class="auto-img">
                        </div>
                        </router-link>
                    </div>
                  
                    
                </ul>
            </div>
            
             
            <div class="line"></div>
           
            
            

            <!-- 空盒子 -->
            <div class="nullbox"></div> 
            </div>
            <div class="homemain" v-show="this.nowindex==3">
              <!-- 列表页渲染 -->
            <div class="box_foot_lists" v-if="Lists">
                <ul>
                  
                    <div v-for="(item) in Lists" :key="item.id">
                      <router-link :to="'/details?id='+item.id" tag="li">
                        <div class="titlebox">
                            <div class="title">{{item.title}}</div>
                            <div class="subtitle">
                                <!-- 存在video数据或者有hot数据的加上con类名 -->
                                <div :class="[{'con':item.video || item.hot}]">{{item.video}}{{item.hot}}</div>
                                <div>{{item.name}} {{item.time}}小时前</div>
                            </div>
                        </div>
                        <div class="imgbox">
                            <img :src="item.img" alt="" class="auto-img">
                        </div>
                        </router-link>
                    </div>
                  
                    
                </ul>
            </div>
            
            
            <div class="line"></div>
            
            
            

            <!-- 空盒子 -->
            <div class="nullbox"></div> 
            </div>
            <!-- <div class="homemain" v-for="(item,index) in LISTS" :key="index">
           
            <div class="box_foot_lists" v-if="Lists">
                <ul>
                  
                    <div v-for="(item) in Lists" :key="item.id">
                      <router-link :to="'/details?id='+item.id" tag="li">
                        <div class="titlebox">
                            <div class="title">{{item.title}}</div>
                            <div class="subtitle">
                          
                                <div :class="[{'con':item.video || item.hot}]">{{item.video}}{{item.hot}}</div>
                                <div>{{item.name}} {{item.time}}小时前</div>
                            </div>
                        </div>
                        <div class="imgbox">
                            <img :src="item.img" alt="" class="auto-img">
                        </div>
                        </router-link>
                    </div>
                  
                    
                </ul>
            </div>
            
             <div class="bannertitle">
                <div class="titlebox">
                    <div></div>
                    <div class="headtitle">
                        青创头条
                    </div>
                    </div>
                    <div class="subtitle">
                        查看更多
                    </div>
            </div>
            <div class="line"></div>
            <div class="box_body" v-if="Bannerimg">
               
                <router-link tag="div" to="/details" class="banner" >
                  <div class="swiper mySwiper">
                    <div class="swiper-wrapper ">
                      <div class="swiper-slide swiper-banner" v-for="(item,index) in Bannerimg" :key="index">
                          <ul>
                              <li>     
                                  <img :src="item.img" alt="" class="auto-img">
                                  <p>{{item.title}}</p> 
                                  <span>{{item.name}}</span>
                              </li>
                            
                          </ul>
                      </div>
                    </div>
                    
                  </div>
                </router-link>
            </div>
            
            

            
            <div class="nullbox"></div> 
            </div> -->
            
            
            <banner-list></banner-list>
        </div>    
            
        
        </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import bannerList from '../components/bannerList.vue';
import { getLists,getImg} from "../api/lists.js";
import { getBanner} from "../api/banner.js";
export default {
  data() {
    return {
      LISTS:null,
      Lists:null,//列表页数据
      Lists2:null,
      Img:null,
      Bannerimg:null,
      active: 1,
      nowindex:0,
      tabTitle:["温暖的BaoBao","热点","共青团","冰点"],
    };
  },
    methods:{
      //选项卡切换
      tab(i){
        this.nowindex=i;
        // console.log(this.nowindex);
      },
      //
      add(){
        if(this.nowindex==this.tabTitle.length-1){
          this.nowindex=0;
        }else{
          this.nowindex+=1;
        }
      },
      //接收数据
      getListsFun(){
        getLists().then(data=>{
          // console.log(data);
          this.LISTS=data;
          this.Lists=data.data;
          // console.log(this.Lists);
          this.Lists2=data.data2;
          // console.log(this.Lists2);
        })
      },
      getImgFun(){
        getImg().then(data=>{
          // console.log(data);
          this.Img=data.image;
        })
      },
      getBannerFun(){
        getBanner().then(data=>{
          // console.log(data);
          this.Bannerimg=data.banner;
        })
      }
    },
    created(){
      
      this.getListsFun();
      this.getImgFun();
      this.getBannerFun();
      
    },
    components:{
      bannerList
    },
    mounted(){
       new Swiper(".mySwiper", {
        slidesPerView: "auto",
        spaceBetween: 15,
        observer:true,
        observerParents:true,
      });
      
    }
}
</script>

<style lang="scss">

.home {
  
  .box_header {
    padding-bottom: 5px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #fff;
    padding-left: 0;
    .navtop {
      padding-top: 10px;
      margin-bottom: 15px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      & > .logo {
        // width: 76px;
        height: 33px;
        // padding: 0 6px;
        box-sizing: border-box;
      }
      & > .search {
        // width: 240px;
        flex: 1;
        height: 33px;
        line-height: 33px;
        font-size: 13px;
        font-weight: 600;
        color: #b9b9b9;
        padding: 0 11px;
        padding-left: 36px;
        box-sizing: border-box;
        background-color: #f0f0f0;
        margin: 0 13px;
        border-radius: 15px;
        position: relative;
        & > span {
          position: absolute;
          left: 11px;
          top: 8px;
          width: 19px;
          height: 17px;
          display: block;
        }
      }
      & > .study {
        width: 36px;
        height: 33px;
        margin-left: 8px;
      }
    }
    .nav {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      .plus {
        cursor: pointer;
        width: 17px;
        height: 17px;
        margin-top: 1px;
        margin-left: 11px;
      }
      & > ul {
        display: flex;
        flex: 1;
        padding-left: 6px;
        justify-content: space-between;
        & > li {
          font-weight: 600;
          color: #7b7b7b;
          font-size: 14px;
          transition: all 0.4s linear;
          &.con {
            color: #236d9d;
          }
          &.com {
            color: #ef3926;
            & > div {
              transition: all 0.4s linear;
              background-color: #ef3926;
            }
          }
          & > div {
            margin: 0 auto;
            margin-top: 9px;
            width: 20px;
            height: 3px;
            border-radius: 1px;
            &.con {
              background-color: #ef3926;
            }
          }
        }
      }
    }
  }
  .box_body {
    .swiper-banner{
      width: 90%;
    }
  .banner {
    margin-bottom: 19px;
    overflow: hidden;
    padding: 0 13px;
    
    ul {
      
      display: flex;
      li {
        border-radius: 6px;
        overflow: hidden;
        position: relative;
        flex: 1;
        p {
          position: absolute;
          font-size: 15px;
          font-weight: bold;
          color: #fff;
          bottom: 42px;
          left: 17px;
          padding-right: 17px;
          letter-spacing: 2px;
        }
        span {
          padding: 0 11px;
          height: 18px;
          font-size: 12px;
          line-height: 18px;
          color: #fff;
          border-radius: 12px;
          position: absolute;
          display: block;
          bottom: 14px;
          right: 15px;
          background-color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
}

  .bannertitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    margin-left: 13px;
    margin-right: 10px;
    .titlebox {
      display: flex;
      .headtitle {
        font-size: 16px;
        font-weight: 600;
      }
      div {
        &:first-child {
          width: 5px;
          height: 22px;
          border-radius: 2px;
          background-color: #ff1414;
          margin-right: 10px;
        }
      }
    }
    .subtitle {
      font-size: 14px;
      font-weight: 600;
      color: #7d7d7d;
      padding-right: 4px;
    }
  }
  .box_foot_lists {
    margin-bottom: 10px;
    ul {
      li {
        margin-top: 20px;
        padding-bottom: 15px;
        border-bottom:1px solid #ccc ;
        display: flex;
        justify-content: space-between;
        .titlebox {
          margin-right: 20px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title {
            font-weight: bold;
            margin-bottom: 16px;
            font-size: 15px;
          }
          .subtitle {
            display: flex;
            align-items: center;
            margin-left: -2px;
            div{
              color: #747474;
              font-weight: bold;
              font-size: 12px;
              transform: scale(0.9);
              margin-left: -1px;
              &.con {
                border: 1px solid red;
                border-radius: 5px;
                color: red;
                font-size: 12px;
                font-weight: bold;
                padding: 2px;
              
              }
            }
          }
        }
        .imgbox {
          flex: 0.6;
          border-radius: 6px;
          overflow: hidden;
        }
      }
    }
  }
  footer {
    & > div {
      &:first-child {
        a {
          color: red;
        }
      }
    }
    .home {
      .imgbox {
        width: 37px;
        height: 42px;
        background: url(../assets/img/icon_news_selected.png) no-repeat -3px -2px;
      }
    }
  }
}
.home .box_header,
.home .box_foot_lists
 {
  padding-left: 13px;
  padding-right: 10px;
  z-index: 20;
}

</style>